import { Typography, Image, Collapse } from 'antd';
import type Umi from 'umi';
import { Container, Draggable } from 'react-smooth-dnd';
import type { PreviewCube } from 'umi';

import styles from './index.less';

const { Text } = Typography;

interface ICubeListProps {
  data: Umi.TDecorationModelState['groupCubes'];
  previewList: PreviewCube[];
}

const { Panel } = Collapse;

const CubeList: React.FunctionComponent<ICubeListProps> = (props) => {
  const getCubeNumber = (type: string) =>
    props.previewList.filter((item) => item.type === type).length || 0;

  return (
    <Collapse accordion ghost expandIconPosition="end" defaultActiveKey={props.data[0]?.type}>
      {props.data.map((item) => (
        <Panel
          header={
            <span>
              {item.title} ({item.cubes.length})
            </span>
          }
          key={item.type}
        >
          <div className={styles.panel}>
            {/* @ts-ignore */}
            <Container
              groupName="cube"
              behaviour="copy"
              key={item.type}
              dragClass={styles.drag}
              getChildPayload={(i) => item.cubes[i]}
              style={{
                display: 'grid',
                gridTemplateColumns: '1fr 1fr',
                gridRowGap: '5px',
                gridColumnGap: '5px',
                textAlign: 'center',
              }}
            >
              {item.cubes.map((cube) => (
                // @ts-ignore
                <Draggable
                  key={cube.type}
                  style={{
                    height: 50,
                    width: 100,
                    position: 'relative',
                    overflow: 'visible',
                    margin: '0 28px 112px 28px',
                  }}
                >
                  <div className={styles['cube-item']}>
                    <Image
                      className={styles.img}
                      width={100}
                      height={100}
                      src={cube.logo}
                      preview={false}
                      onDragStart={(e) => e.preventDefault()}
                      fallback=""
                    />
                    <Text className={styles['cube-item-title']}>{cube.title}</Text>
                    <Text type="secondary" className={styles['cube-item-num']}>
                      {getCubeNumber(cube.type)}/{cube.limit}
                    </Text>
                  </div>
                </Draggable>
              ))}
            </Container>
          </div>
        </Panel>
      ))}
    </Collapse>
  );
};

export default CubeList;
